<template>
    <div class="box" @click="handleJump">
        <el-card shadow="always" :body-style="{ padding: '15px', height: '85px' }">
            <div class="flex icon-cont">
                <i :class="['iconfont', icon]" :style="{ color }"></i>
                <p>{{ title }}</p>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

interface PropsType {
    icon: string;
    title: string;
    color: string;
    path: string;
}
const props = defineProps<PropsType>()
const router = useRouter()
const handleJump = () => {
    router.push(props.path)
}
</script>

<style scoped lang="scss">
.box {
    cursor: pointer;
}

.icon-cont {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    .iconfont {
        font-size: 26px;
    }

    >p {
        margin-top: 10px;
        font-size: 14px;
    }
}
</style>